<template>
    <div style="overflow: auto;height: 100%">

        <div class="navHeader" style="width: 100%;height: 64px;background-color: #495060;">
            <el-row>
                <div class="system-info">
                    <img class="logo" src="@/assets/logo.png" style=" width: 40px;
                        height: 40px;
                        border-radius: 50px;
                        margin-top: 12px;
                        margin-left: 60px;
                        margin-right: 10px;
                        float: left;">
                    <span class="title" style="font-size: 20px;
                        font-weight: bold;
                        color: azure;
                        line-height: 64px;">
                        ai-xue
                    </span>
                </div>
                <div class="system-navigation" >
                    <ul >
                        <li>简介</li>
                        <li>作品</li>
                        <li>事迹</li>
                        <li>关于</li>
                        <li>联系我们</li>
                    </ul>
                </div>
                <div class="system-login" style="clear: both">
                    <ul>
                        <router-link to="/login"><li>登录</li></router-link>
                        <router-link to="/register"><li>注册</li></router-link>
                    </ul>
                </div>
            </el-row>
        </div>

        <div class="block" style="clear: both">
            <el-carousel  height="450px" style="z-index:9999">
                <el-carousel-item v-for="(item, index) in imgList" :key="index">

                    <img v-bind:src="item.url" style="width:100%;height: 500px">
                    <!--<span style="position: absolute; top: 30px; left: 50px;color: darkgrey;z-index: 100;"><img src="../../assets/0.png"></span>-->
                    <span style="position: absolute; top: 30px; left: 50px;color: darkgrey;z-index: 100;font-family: 华文彩云;font-size: xx-larger">AI</span>

                </el-carousel-item>
            </el-carousel>
        </div>

        <!--<div style="background-color: #9933ff;height: 100px"></div>-->
        <!--<div style="background-color: #000000;height: 100px"></div>-->
        <!--<div style="background-color: #00a854;height: 100px">a</div>-->
        <div>
            <img src="../../assets/1.png">
        </div>
        <div>
            <img src="../../assets/3.png">
        </div>
        <div>
            <img src="../../assets/2.png">
        </div>
        <div>
            <img src="../../assets/12.png">
        </div>
        <div>
            <img src="../../assets/14.png">
        </div>
<div></div>

    </div>
</template>

<script>
    import publicHeader from '../../components/Index/ShouYeHeader'
    export default {
        name: "HomePage",
        components:{
            publicHeader
        },
data(){
  return {
      imgList:[
          {url: require('../../assets/15.jpg')},
          {url: require('../../assets/ttt222.jpg')},
          {url: require('../../assets/16.jpg')},
      ],
  }
},
        methods:{
            login:function () {
                this.$router.push("/login");
            },
            sign:function () {
                this.$router.push("/register");
            }
        },

        // created(){
        //     console.log("hhhhhhhhh")
        // }
    }
</script>

<style scoped>

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
   .system-navigation  ul{
       list-style-type: none;
       padding: 0;
       margin-left: 300px;
       margin-top: -55px;
    }
.system-navigation ul li{
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
    .system-login  ul{
      clear: both;
      list-style-type: none;
      padding: 0;
      margin-right: 60px;
    }
.system-login ul li{
    float: right;
    display: block;
    color: white;
    text-align: center;
    padding: 15px 14px;
    text-decoration: none;
    margin-left: 5px;
    margin-top: -50px;
}
</style>
